<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用js书写ajax请求  访问服务器
        function ajaxReq(){
            //1.创建XMLHttpRequest对象  新的浏览器和旧的浏览器稍有不同
            var xhttp;
            if(window.XMLHttpRequest){
                //新的浏览器
                xhttp = new XMLHttpRequest();
            }else{
                //旧的浏览器
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var  name = 'zs';
            //2.发送请求
            //建立和服务器的链接
            xhttp.open("GET","http://localhost:8080/javaweb10/ajax01?username="+name);
            //发送请求给服务器
            xhttp.send();

            //3.处理请求服务器响应的内容 (成功才处理)
            //监听响应和状态发生改变
            xhttp.onreadystatechange=function () {
                if(xhttp.readyState == 4 && this.status == 200){//4: 请求已完成，且响应已就绪 	200: "OK"
                    //接受服务器响应回来的数据
                    console.log(this.responseText);//字符串
                    console.log(xhttp.responseXML);//xml

                    document.querySelector("#box").innerHTML=this.responseText;

                }

            }




        }

    </script>
</head>
<body>
<!--点击通过ajax技术访问servlet-->
<input type="button" value="点我发送ajax请求" onclick="ajaxReq()">

<div id="box" style="width: 100px; height: 100px; border: 1px pink solid">
    暂无数据
</div>

555555555555

</body>
</html>